<template>
  <div id="check-seat">
    <div class="title">
      正在为 {{ticketInfo.passengerName}} 选择航班 {{ticketInfo.flightName}} 的座位
    </div>
    <div><img src="../assets/flight-head.jpg" id="f-head"></div>
    <div class="body">
      <div class="body-item left">
        <el-row>
          <el-button type="text" size='small' disabled>窗</el-button>
          <el-button type="info" v-for="(item,index) in ['A','B','C']" :key="index" size='small' disabled>{{item}}
          </el-button>
        </el-row>
        <el-row class="row" :key="row" v-for="(list,row) in rowed_seats">
          <el-button type="text" size='small' disabled>{{row+1}}</el-button>
          <el-button icon="el-icon-user" plain :key="row*6 + col" v-for="(seat,col) in list.slice(0,3)"
            :disabled="seat=='0'" :type="is_available(seat)" size='small' @click="select(row*6 + col + 1)"></el-button>
        </el-row>
      </div>
      <div class="line"></div>
      <div class="body-item right">
        <el-row>
          <el-button type="info" v-for="(item,index) in ['D','E','F']" :key="index" size='small' disabled>{{item}}
          </el-button>
          <el-button type="text" size='small' disabled>窗</el-button>
        </el-row>
        <el-row class="row" :key="row" v-for="(list,row) in rowed_seats">
          <el-button icon="el-icon-user" :key="row*6 + col" v-for="(seat,col) in list.slice(3,6)" :disabled="seat=='0'"
            :type="is_available(seat)" plain size='small' @click="select(row*6 + col + 3 + 1)"></el-button>
          <el-button type="text" v-if="list.slice(3,6).length!=0" size='small' disabled>{{row+1}}</el-button>
        </el-row>
      </div>
    </div>
    <div class="footer">
      <el-button @click="decide_seat" icon="el-icon-circle-check">确 定</el-button>
      <el-button @click="cancel_check" icon="el-icon-circle-close">取 消</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "CheckSeat",
  props: {
    ticketInfo: {
      id: {
        type: Number,
        default: -1
      },
      passengerName: {
        type: String,
        default: "lisa"
      }
    }
  },
  data() {
    return {
      ticket_id: this.ticketInfo.ticketId,
      seat_num: -1,
      seats: []
    };
  },
  methods: {
    select(id) {
      //得到航班号
      this.seat_num = id;
    },
    decide_seat() {
      // todo:上传请求
      this.$axios
        .post(this.$GLOBAL.localHost + "check_in/", {
          ticketId: this.ticket_id,
          seatNo: this.seat_num - 1
        })
        .then(res => {
          if (res.data.success == 1) {
            this.$message({
              message: "选座成功！",
              type: "success"
            });
            cancel_check();
            get_list();
          } else {
            this.$message.error('选座失败！');
          }
        })
        .catch(error => console.log(error));
    },
    cancel_check() {
      this.$emit("cancel-check");
    },
    get_list() {
      //todo:获取数据
      this.$axios
        .post(this.$GLOBAL.localHost + "getseat/", {
          flightId: this.ticketInfo.flightId
        })
        .then(res => {
          console.log("旅客座位信息");
          console.log(res);
          this.seats = res.data.seat.replace(/(.)(?=[^$])/g, "$1,").split(",");
          console.log(this.seats);
        })
        .catch(error => {
          console.log(error);
          this.$message.error('获取选座表错误');
        });
      this.seats = [];
    },
    is_available(seat) {
      return seat == "1" ? "primary" : "info";
    }
  },
  watch: {
    ticketInfo(newVal, oldVal) {
      this.get_list();
    }
  },
  computed: {
    rowed_seats() {
      var result = [];
      var size = 6;
      for (var x = 0; x < Math.ceil(this.seats.length / size); x++) {
        var start = x * size;
        var end = start + size;
        result.push(this.seats.slice(start, end));
      }
      return result;
    }
  },
  mounted() {
    this.get_list();
  }
};
</script>

<style scoped>
#check-seat {
  line-height: 100%;
}
.flex {
  display: flex;
}
.j-s {
  justify-content: space-around;
}
.title {
  font-size: 24px;
  font-weight: bolder;
  height: 40px;
}
.body {
  display: flex;
  justify-content: center;
}
.body-item {
  margin: 5px 15px;
}
.row {
  margin: 10px 0;
}
.line {
  background: #999;
  border-left: 2px solid #666;
  border-right: 2px solid #666;
  min-width: 25px;
}
.footer {
  margin: 5px;
}
#f-head {
  max-height: 75px;
}
</style>